<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :mode="mode" :defaultConfig="toolbarConfig" :editor="editorRef" />
        <Editor style="height: 300px; overflow-y: hidden;" :defaultConfig="editorConfig" v-model="valueHtml"
            @onCreated="handleCreated" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onBeforeUnmount, shallowRef, onMounted, onUpdated } from "vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from "axios";
//富文本编辑器
// 编辑器实例，必须用 shallowRef 
const editorRef = shallowRef()
const valueHtml = ref('')
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！

}
const mode = 'default'
const toolbarConfig = {}

const imUr = ref('');
//在editorConfig 添加
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            async customUpload(file, insertFn) {
                console.log(file), 77788;
                // const forms = new FormData();
                // forms.append("参数", file); // 获取上传图片信息
                // //  请求接口
                // axios
                //   .post("上传接口", forms, {
                //     headers: {
                //       "content-type": "multipart/form-data",
                //     },
                //   })
                //   .then((res) => {
                //     console.log(res);
                //     imUr.value = res.data.front_file
                //     if (res.data.status == 200) {
                //       console.log(res);

                //     }
                //     // file 即选中的文件
                //     // 自己实现上传，并得到图片 url alt href
                //     // 最后插入图片
                //     insertFn('http//' + imUr.value, alt, href)
                //   });


            },


        }
    },
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

onUpdated(() => {
    const editor = editorRef.value
    // console.log(editor.getMenuConfig('uploadImage'), 4444);

})
</script>   